<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/animate.css">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../css/mescroll.css">
		<link rel="stylesheet" href="../../css/gloab.css">
		<title>我的人脉</title>
		<style>
			.form-son-input {
				line-height: 1rem;
				font-size: 0.28rem;
			}

			.mescroll {
				position: fixed;
				top: 0;
				bottom: 0;
				height: auto;
				left: 0;
				right: 0;
			}

			.nav {
				background: #eaeff4;
				color: #64aafc;
			}

			.nav-button {
				width: auto;
				height: 0.45rem;
				text-align: center;
				margin: auto;
				color: #fff;
				background: #64aafc;
				line-height: 0.45rem;
				padding: 0.1rem;
				border-radius: 0.1rem;
			}

			.bg {
				background: #eee;
				color: #000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="public-header">
				<div id="statusbar"></div>
				<header class="public-header">
					<div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
					<div class="public-header-title">我的人脉</div>
				</header>
			</div>
			<div class="dating-body-bar flex" id="nav">
				<!-- <div class="dating-body-bar-son F1" :style="indexs==0?'':'background-color:#eaeff4;color:#64aafc;'" @click="getMyrenmai(index=0)"></div> -->
				<div class="nav-button bg">直接人脉：<font style="color:#f00;">({{nums}}人)</font>
				</div>
				<div class="nav-button bg" v-if="numss">团队总人数:<font style="color:#f00;">{{numss}}</font>人</div>
				<div class="nav-button bg" v-else>团队总人数:<font style="color:#f00;">0</font>人</div>
			</div>
			<div id="mescroll" class="mescroll">
				<div>
					<div class="zijinmx-body" v-if="myrenmai&&myrenmai.length>0">
						<div class="product-category-list">
							<div class="product-category-list-son" style="width:94%;margin:auto;box-shadow:none;border-bottom:1px solid #eee;border-radius:0;"
							 v-for="(item,index) in myrenmai">
								<div class="product-category-list-header flex wrap">
									<div class="product-category-list-header-lf" style="height:1.1rem;">
										<img :src="apiUrl1+item.avatar" alt="" v-if="item.avatar">
										<img src="../../image/public/touxiang.png" alt="" v-else>
										<label class="product-category-list-header-label" style="padding:0.01rem 0 0;">{{item.user_type}}</label>
									</div>
									<div class="product-category-list-header-rt">
										<div class="product-category-list-header-name flex wrap" style="height:0.45rem;padding:0.1rem;">
											<div class="product-category-list-header-name-lf" v-if="item.nickname" style="overflow:hidden;width:18%;height:0.45rem;">{{item.nickname}}</div>
											<div class="product-category-list-header-name-lf" v-else>未添加</div>
											<div style="clear:both;"></div>
											<span style="border:none;color:#999;width:45%;overflow:hidden;" v-if="item.mobile">手机号:{{item.mobile}}</span>
											<span style="border:none;color:#999;width:45%;overflow:hidden;" v-else>手机号:未添加</span>
											<div class="" style="width:35%;text-align:right;line-height:0.45rem;margin-right:0rem;float:right;color:#f00;">{{item.user_type}}</div>
										</div>
										<div class="product-category-list-header-name flex">
											<div class="guanggao-details-head-rt flex wrap" style="width:100%;">
												<div class="guanggao-details-head-rt-son" style="width:50%;margin-left:0.1rem;overflow:hidden;">微信:<span
													 v-if="item.wechat">{{item.wechat}}</span><span v-else>未添加</span></div>
												<!-- <div class="guanggao-details-head-rt-son" style="width:40%;float:right;text-align:right;color:#677bff;">Ta的人脉：{{item.renmai}}</div> -->
											</div>
										</div>
										<div class="product-category-list-header-name flex">
											<div class="guanggao-details-head-rt flex wrap" style="width:100%;">
												<div class="guanggao-details-head-rt-son" style="width:50%;margin-left:0.1rem;">发布：<span>{{item.fabu}}条</span></div>
												<div class="guanggao-details-head-rt-son" style="width:48%;float:right;text-align:right;"><span>{{item.create_time}}</span></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- <div v-if="myrenmai.length<=0" class="none-order">
          <span>暂无数据</span>
        </div> -->
				</div>
			</div>
		</div>
		<div class="public-progress" style="z-index:9;">
			<img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/mescroll.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/jsencrypt.js"></script>
	<script src="../../script/fastclick.js"></script>

	<script>
		var vm;
		var mescroll;
		apiready = function() {
			api.removeLaunchView();
			setBar("statusbar");
			setFont(750);
			startVue();
			NewMescroll();
			var top = $("#public-header").outerHeight(true) + $("#nav").outerHeight(true);
			$("#mescroll").css({
				"top": top + "px"
			});
			$(".public-progress").fadeOut(1000);
			setTimeout(function() {
				$(".public-progress").css({
					"display": "none"
				});
			}, 2000);
		}

		function startVue() {
			vm = new Vue({
				el: "#app",
				data: {
					gdtt: ['100', '1000', '5000', '10000', '20000', '50000'],
					num: 3,
					page: 1,
					pageshow: 10,
					res: ['发布广告', '管理广告'],
					myrenmai: [],
					indexs: '0',
					nums: '0',
					numss: '',
				},
				created: function() {},
				methods: {
					more: function(obj) {
						if (obj.num) {
							vm.page++;
						} else {
							vm.page = 1;
							mescroll.lockUpScroll(false);
						}
						vm.getMyrenmai();
					},
					getnumss: function() {
						api.ajax({
							url: apiUrl + 'api/home/getnumss',
							method: 'post',
							data: {
								values: {
									uid: post_en($api.getStorage('uid')),
								},
							}
						}, function(ret, err) {
							if (ret.status) {
								vm.numss = ret.data;
							} else {
								vm.numss = ret.data;
							}
						});

					},
					getMyrenmai: function() {
						api.showProgress({
							title: '努力统计中...',
							text: '先喝杯茶...',
							modal: false
						});
						api.ajax({
							url: apiUrl + '/api/user/childs',
							method: 'post',
							data: {
								values: {
									page: vm.page,
									token: $api.getStorage('token'),
								},
							}
						}, function(ret, err) {
							api.hideProgress();
							vm.nums = ret.data.zt_num;
							vm.numss = ret.data.total;
							if (vm.page == 1) {
								vm.myrenmai = [];
							}
							if (ret.code == 1) {
								if (vm.myrenmai.length >= ret.data.total && vm.myrenmai.length != 0) {
									msg("我也是有底线的！");
									mescroll.lockUpScroll(true);
									api.hideProgress();
								} else {
									for (var i = 0; i < ret.data.invite.length; i++) {
										ret.data.invite[i].mobile=ret.data.invite[i].mobile.substring(0,3)+"****"+ret.data.invite[i].mobile.substring(7);
										
										vm.myrenmai.push(ret.data.invite[i]);
									}
								}
								console.log(ret.data.invite[0].mobile.substring(0,3));
								console.log(JSON.stringify(vm.myrenmai));
								// vm.myrenmai=ret.data;
							} else {
								mescroll.lockUpScroll(true);
								// mescroll.lockUpScroll(true);
							}
							mescroll.endUpScroll(false);
							mescroll.endSuccess();
						});
					},
				}
			})
		}

		function NewMescroll() {
			mescroll = new MeScroll("mescroll", {
				down: {
					use: true,
					auto: true,
					// autoShowLoading:true,
					callback: vm.more, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
				up: {
					use: true,
					auto: false,
					isBoth: true,
					lazyLoad: {
						use: true, // 是否开启懒加载,默认false
						attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): <img imgurl='网络图  src='占位图''/>
						showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
						delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
						offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
					},
					callback: vm.more, //上拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				}
			})
		}
	</script>
</html>
